<template>
  <div class="columnDetail-box" :style="computeBgStyle">
    <!-- 导航栏 -->
    <ColumnDetailHeader :data="zlData" :hIndex="hIndex" @nav="handleNavChange" v-if="zlData.uuid" />
    <!-- 内容区 -->
    <div class="zl-content" :style="computeBgStyle">
      <div v-if="$route.query.uuid === '1406625986673512448'">
        <div class="star star0"></div>
        <div class="star star1"></div>
        <div class="star star2"></div>
        <div class="star star3"></div>
        <div class="star star4"></div>
      </div>
      <!-- 背景图 -->
      <img :src="item" alt="背景" v-for="(item, index) of zlData.bgImgUrls" :key="index" class="bgImg">
      <div class="zl-content-box" :style="computeBgStyle">
        <!-- banner -->
        <img v-if="zlData.topImgUrl" :src="zlData.topImgUrl" class="banner" alt="顶部大图片">
        <!-- 模块 type:0 图片， type=1 新闻/视频， type=2 照片墙 -->
        <div class="part-box" v-for="(pItem, pIndex) of zlData.titles" :key="pIndex">
          <!-- 标题 -->
          <div :id="'title' + pIndex" style="padding-top: 90px;">
           <img :src="pItem.nameImgUrl" alt="" class="part-title" v-if="pItem.nameImgUrl">
          </div>
          <!-- 图片 -->
          <template v-if="pItem.type === 0 && (pItem.items && !pItem.subTitles)">
            <!-- 只有一张图 -->
            <div v-if="pItem.items.length === 1">
              <img :src="pItem.items[0].imgUrl" alt="" class="part-content"  @click="handleImgClick(pItem.items[0].linkUrl)">
            </div>
            <div v-else style="margin-top: 90px;">
              <img :src="ssItem.imgUrl" alt="" v-for="(ssItem, ssIndex) of pItem.items" :key="ssIndex" style="width: 1180px; display: block;">
            </div>
          </template>
          <!-- 子标题情况-->
          <template v-if="pItem.type === 0 && (pItem.subTitles && !pItem.items)">
            <div class="hastabs">
              <div class="tab-wrapper">
                <div class="tab-box">
                  <span
                    v-for="(subItem, subIndex) of pItem.subTitles"
                    :key="subIndex"
                    class="tab"
                    :class="{activeTab: activeTabIndex === subIndex}"
                    @click="onChangeTab(subIndex)"
                  >
                    {{ subItem.name }}
                  </span>
                </div>
              </div>
              <img :src="pItem.subTitles[activeTabIndex].items[0].imgUrl" alt="" class="part-content" @click="handleImgClick(pItem.subTitles[activeTabIndex].items[0].linkUrl)">
            </div>
          </template>
          <!-- 新闻/视频 -->
          <template v-if="pItem.type === 1">
            <div class="list-box">
              <div class="item-box" v-for="(subItem, subIndex) of pItem.items" :key="subIndex"  @click="handleImgClick(subItem.linkUrl)">
                <img :src="subItem.imgUrl" class="item-img" :class="{videoImg: subItem.type === 1}" alt="">
                <div class="title-box">
                  <!-- subItem.type=1  是视频，需要播放按钮 -->
                  <img src="../../assets/play-icon.png" class="playImg" alt="" v-if="subItem.type === 1">
                  <div class="item-title">
                    {{ subItem.name }}
                  </div>
                </div>
              </div>
            </div>
            <div class="more-box" v-if="pItem.itemsCount > pItem.items.length">
              <el-button @click="onLoadMore(pItem)">加载更多内容...</el-button>
            </div>
          </template>
          <!-- 照片墙 -->
          <template v-if="pItem.type === 2">
            <div class="list-box">
              <el-image
                v-for="(zpqItem, zpqIndex) of pItem.items"
                :key="zpqIndex"
                class="zpq-img"
                :src="zpqItem.imgUrl" 
                :preview-src-list="getImages(pItem.items)">
              </el-image>
            </div>
            <div class="more-box" v-if="pItem.itemsCount > pItem.items.length">
              <el-button @click="onLoadMore(pItem)">加载更多内容...</el-button>
            </div>
          </template>
        </div>
        <!-- 底部 -->
        <Footer />
      </div>
    </div>
  </div>
</template>

<script>
import { zlDetail, zlLoadMore, zlRead } from '@/api/api'
import ColumnDetailHeader from '@/components/ColumnDetailHeader'
import Footer from '@/components/Footer';

export default {
  components: {
    ColumnDetailHeader,
    Footer
  },
  data() {
    return {
      zlData: {},
      activeTabIndex: 0,
      // header激活的index
      hIndex: 0
    }
  },
  computed: {
    computeBgStyle() {
      if(this.zlData.bgImgUrls && this.zlData.bgImgUrls.length>0) {
        return;
      }
      if(!this.zlData.bgColor){
        return;
      }

      return {backgroundColor: this.zlData.bgColor}
    }
  },
  created() {
    this.getDetail(this.$route.query.uuid)
    this.onRead(this.$route.query.uuid)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 标记已读买点
    async onRead(uuid) {
      await zlRead(uuid);
    },
    // 滚动
    handleScroll() {
      const num0 = this.$el.querySelector('#title'+0).getBoundingClientRect().top
      const num1 = this.$el.querySelector('#title'+1).getBoundingClientRect().top
      const num2 = this.$el.querySelector('#title'+2).getBoundingClientRect().top
      const num3 = this.$el.querySelector('#title'+3).getBoundingClientRect().top
      const num4 = this.$el.querySelector('#title'+4).getBoundingClientRect().top
      const num5 = this.$el.querySelector('#title'+5).getBoundingClientRect().top
      const num6 = this.$el.querySelector('#title'+6).getBoundingClientRect().top
      const num7 = this.$el.querySelector('#title'+7).getBoundingClientRect().top
      if (num0>0 && num0 < 300) {
        this.hIndex = 0
      }
      if (num1>0 && num1 < 300) {
        this.hIndex = 1
      }
      if (num2>0 && num2 < 300) {
        this.hIndex = 2
      }
      if (num3>0 && num3 < 300) {
        this.hIndex = 3
      }
      if (num4>0 && num4 < 300) {
        this.hIndex = 4
      }
      if (num5>0 && num5 < 300) {
        this.hIndex = 5
      }
      if (num6>0 && num6 < 300) {
        this.hIndex = 6
      }
      if (num7>0 && num7 < 300) {
        this.hIndex = 7
      }
    },
    // 加载更多
    async onLoadMore(item) {
      const params = {
        start: item.items.length,
        limit: 12
      }
      const res = await zlLoadMore(item.uuid, params)
      if (res.result === 0) {
        item.items = item.items.concat(res.list)
      }
    },
    // 点击标题切换楼梯
    handleNavChange(index) {
      this.$el.querySelector('#title'+index).scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block:  "start"  // 上边框与视窗顶部平齐。默认值
      })
    },
    // 获取专栏详情
    async getDetail(uuid) {
      const res = await zlDetail(uuid)
      if (res.result === 0) {
        this.zlData = res.zl
      }
    },
    // 图片点击
    handleImgClick(url) {
      if (url) {
        window.open(url, '_blank')
      }
    },
    // 获取所有的图片集合
    getImages(list) {
      const arr = []
      list.map(item => {
        arr.push(item.imgUrl)
      })
      return arr
    },
    // 标签页分会场改变时
    onChangeTab(index) {
      this.activeTabIndex = index;
    }
  }
}
</script>

<style lang="scss" scoped>
.columnDetail-box {
  width: 100%;
  height: 1000px;
  .zl-content {
    position: relative;
    .bgImg {
      width: 100%;
      object-fit: contain;
      display: block;
      position: relative;
    }
    .zl-content-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      .banner {
        width: 100%;
        object-fit: contain;
        margin-bottom: 90px;
      }
      .part-box {
        width: 1180px;
        margin: 0 auto;
        .part-title {
          width: 1180px;
        }
        .part-content {
          width: 100%;
          object-fit: contain;
        }
        .list-box {
          padding: 90px 65px 60px;
          overflow: hidden;
          .item-box {
            width: 240px;
            height: 220px;
            float: left;
            margin-right: 30px;
            margin-bottom: 30px;
            cursor: pointer;
            overflow: hidden;
            .playImg {
              width: 60px;
              height: 60px;
              position: absolute;
              top: 37px;
              left: 50%;
              margin-left: -30px;
              display: block;
            }
            &:nth-child(4n+4) {
              margin-right: 0;
            }
            .item-img {
              width: 240px;
              height: 135px;
              display: block;
              border-radius: 4px 4px 0 0;
              transition: all 1s;
              &:hover {
                transform: scale(1.12);
              }
              &.videoImg {
                &:hover {
                  transform: scale(1);
                }
              }
            }
            .title-box {
              padding: 18px 15px;
              background:#656C84;
              border-radius: 0 0 4px 4px;
              position: relative;
              .item-title {
                height: 48px;
                font-size: 18px;
                font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei";
                font-weight: bold;
                line-height: 24px;
                box-sizing: border-box;
                color: #fff;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
              }
              .playImg {
                position: absolute;
                top: -97px;
                left: 50%;
                width: 60px;
                height: 60px;
              }
            }
          }
          .zpq-img {
            width: 240px;
            height: 135px;
            margin-right: 30px;
            margin-bottom: 27px;
            float: left;
            &:nth-child(4n+4) {
              margin-right: 0;
            }
            /deep/ img {
              transition: all 1s;
            }
            &:hover {
              /deep/ img {
                transform: scale(1.12);
              }
            }
          }
          /deep/ .el-image-viewer__close {
            top: 150px;
            color: #fff
          }
        }
        .more-box {
          text-align: center;
          margin-bottom: 90px;
        }
        .hastabs {
          margin-bottom: 90px;
          .tab-wrapper {
            margin-top: 90px;
            text-align: center;
            margin-bottom: 90px;
            .tab-box {
              display: inline-block;
              margin: 0 auto;
              border: 1px solid #4E4E4E;
              border-radius: 46px;
              .tab {
                padding: 8px 30px;
                font-size: 18px;
                color: #7D7D7D;
                float: left;
                cursor: pointer;
                transition: all 1s;
                &.activeTab {
                  background: #EC1A1A;
                  color: #ffffff;
                  font-weight: bold;
                  border-radius: 46px;
                }
              }
            }
          }
        }
      }
    }
  }

  // 流星
  .star {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #FFF;
    top: 100px;
    left: 500px;
    position: relative;
    transform-origin: 100% 0;
    animation: star-ani 4s linear infinite;
    -webkit-animation:star-ani 5s linear infinite;
    box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
    opacity: 0;
    z-index: 2;
}
.star:after {
    content: '';
    display: block;
    top: 0px;
    left: 4px;
    border: 0px solid #fff;
    border-width: 0px 90px 2px 90px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .3);
    transform: rotate(-45deg) translate3d(1px, 3px, 0);
    box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
    transform-origin: 0% 100%;
}
.star0 {
    top: 100px;
    left: 800px;
    background: #fff;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}
.star0:after {
    border-color: transparent transparent transparent #fff;
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}
.star1 {
    top: 120px;
    left: 1200px;
    background: #fff;
    animation-delay: 7s;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
}
.star1:after {
     border-color: transparent transparent transparent fff;
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    animation-delay: 7s;
}
.star2 {
    top: 50px;
    left: 600px;
    background: #fff;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
}
.star2:after {
     border-color: transparent transparent transparent fff;
    animation-delay: 4s;
    -webkit-animation-delay: 4s;
    -moz-animation-delay: 4s;
}

.star3 {
    top: 250px;
    left: 1500px;
    background: #fff;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s;
    -moz-animation-delay: 3.2s;
}
.star3:after {
     border-color: transparent transparent transparent fff;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s;
    -moz-animation-delay: 3.2s;
}

.star4 {
    top: 250px;
    left: 1600px;
    background: #fff;
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
}
.star4:after {
     border-color: transparent transparent transparent fff;
    animation-delay: 3.2s;
    -webkit-animation-delay: 3.2s;
    -moz-animation-delay: 3.2s;
}
  @keyframes star-ani {
    0% {
        opacity: 0;
        transform: scale(0) translate3d(0, 0, 0);
    }
    20%{
        opacity: 0.8;
        transform: scale(0.2) translate3d(-100px, 100px, 0);
    }
    40% {
        opacity: 0.8;
        transform: scale(0.4) translate3d(-200px, 200px, 0);
    }
    60% {
        opacity: 0.8;
        transform: scale(0.6) translate3d(-300px, 300px, 0);
    }
    80% {
        opacity: 1;
        transform: scale(1) translate3d(-350px, 350px, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1.2) translate3d(-400px, 380px, 0);
    }
}
}
</style>